import React, {useState} from 'react';
import LeaveWarehousePage from './LeaveWarehousePage';
import ReceiveConfirmPage from './ReceiveConfirmPage'
import {
    MaterialTransactionSheetAll,
    MaterialTransactionSheetTabs,
    MaterialTransactionSheetContent
} from './style';
/**
 * @description: 费用管理 -- 内部交易 -- 材料交易单
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-17）创建
 */

const MaterialTransactionSheet =() => {
    const [tabsSelect, setTabsSelect] = useState(true); //true 出库 false 领用确认
    return <MaterialTransactionSheetAll>
        <MaterialTransactionSheetTabs>
            <div className = 'tabs_button_box'>
                <button onClick = {() => setTabsSelect(true)}  className = {!tabsSelect ? 'tabs_button_select_no' : 'tabs_button_select'}>出库</button>
                <button onClick = {() => setTabsSelect(false)}  className = {!tabsSelect ? 'tabs_button_select' : 'tabs_button_select_no'}>领用确认</button>
            </div>
        </MaterialTransactionSheetTabs>
        <MaterialTransactionSheetContent>
            {
                tabsSelect 
                ? 
                <LeaveWarehousePage /> 
                : 
                <ReceiveConfirmPage/>
            }
        </MaterialTransactionSheetContent>
    </MaterialTransactionSheetAll>
}

export default MaterialTransactionSheet;